<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
		<link rel="stylesheet" type="text/css" href="fonts/style.css" />
		<style type="text/css">
			.image-player {
				width: 740px;
				height: 350px;
				margin: 50px auto;
			}
			
			#player-bt {
				position: absolute;
				color: #ccc;
			}
			
			.image-player>span {
				position: absolute;
				color: #CCCCCC;
				font-size: 50px;
			}
			
			.dot-color {
				color: #0000ff;
			}
		</style>
		<script type="text/javascript">
			$(document).ready(function() {
				var player = $(".image-player"); //获取到div          （这样写的好处以后只有建一个div就可以吧这些全部导进去）
				player.append("<img src='img/2.jpg'/>"); //往div中添加一张图片2号
				player.append("<span class='left-arrow icon-uniE67D' style='cursor:pointer'></span>"); //添加一个左符号
				player.append("<span class='right-arrow icon-uniE63D' style='cursor:pointer'></span>");
				player.append("<div id='player-bt' style='cursor:pointer'></div>"); //添加一个圆点div
				var bt = $("#player-bt"); //获取圆点div
				for(var i = 0; i < 5; i++) {
					bt.append("<span class='icon-uniE619'></span>"); //往圆点div中添加5 个圆点
				}
				var h = $(".image-player img"); //获取div中的图片   

				h.load(function(e) { //图片加载完成才执行这个函数，（因为jQuery是多线程，代码不会等图片加载完成才执行）
					var img = e.target || e.srcElement; //获取图片对象
					var pos = $(".image-player").offset(); //offset() 方法返回或设置匹配元素相对于文档的位置，该方法返回的对象包含两个整型属性：top 和 left，以像素计。此方法只对可见元素有效。
					var bt = $("#player-bt"); //获取圆点div
					bt.css("top", pos.top + img.height - 30); //设置圆点div的css样式，顶部距离等于图片的顶部距离加上图片高度减30
					bt.css("left", pos.left + ((img.width - bt.width()) / 2));
					var leftarrow = $(".left-arrow"); //获取左符号
					var rightarrow = $(".right-arrow"); //右符号
					leftarrow.css("top", pos.top + ((img.height - leftarrow.height()) / 2));
					rightarrow.css("top", pos.top + ((img.height - leftarrow.height()) / 2));
					leftarrow.css("left", pos.left);
					rightarrow.css("left", pos.left + img.width - rightarrow.width());
				});

				dots = $(".icon-uniE619"); //获取所有的小圆点
				$(dots[1]).addClass("dot-color"); //因为默认显示第二张图，为第二个小圆点增加样式蓝色
				var imgsrc = $("img").attr("src"); //获取到src属性值  例如（ img/2.jpg）
				var imges = imgsrc.split("."); //获取前半部分通过点好分离  例如（img/2）
				var imgnum = imges[0].split("/"); //获取到数字 通过/分离  例如（2）
				var i = imgnum[1] * 1; //得到i是num型

				$(".left-arrow").click(function() { //左边切换键			
					i--;
					if(i == 0) i = 5;
					$("img").attr('src', "img/" + i + ".jpg"); //设置img的属性值这里用*1是因为获取到的是字符串，通过*1变为num
					var dot = dots[i - 1];
					change_dot_color(dots, dot); //调用改变圆点颜色的方法
				});

				$(".right-arrow").click(nextimg); //点击右按钮调用nexting方法向下切换，记住不加()，加了是点击得到这个方法的返回值，不加是得到方法的全部代码执行

				function nextimg() { //下一张的方法	
					i++; //i自增 i是图片的序号1-5
					if(i == 6) i = 1; //i等于6就变为1
					$("img").attr('src', "img/" + i + ".jpg");
					var dot = dots[i - 1]; //dots是数组0-4    
					change_dot_color(dots, dot); //调用改变圆点颜色的方法
				}

				var intv;
				intv = setInterval(nextimg, 1000); //自动播放间隔时间1秒（nexting向下切换的方法不加（））
				$(".left-arrow").css("visibility", "hidden"); //初始左右符号隐藏
				$(".right-arrow").css("visibility", "hidden");

				$(".image-player").mouseover(function() { //鼠标移上      
					clearInterval(intv); //终止自动播放
					$(".left-arrow").css("visibility", "visible"); //移上就显示
					$(".right-arrow").css("visibility", "visible");
				});

				$(".image-player").mouseout(function() { //鼠标移开
					intv = setInterval(nextimg, 1000); //自动播放间隔时间1秒（nexting向下切换的方法不加（））
					$(".left-arrow").css("visibility", "hidden");
					$(".right-arrow").css("visibility", "hidden");
				});

				$.each(dots, function(index, dot) { //$.each就像java中的foreach,dots就是数组，index是数组的下标，dot是数组中的一个元素
					var i = index + 1; //i等于数组下标加1
					$(dot).mouseover(function() { //移上圆点                     
						change_dot_color(dots, dot); //掉用更改圆点颜色的方法
						$("img").attr('src', "img/" + i + ".jpg"); //并更改图片
					});
				});

				function change_dot_color(dots, dot) { //更改圆点颜色的方法
					dots.removeClass("dot-color"); //所有圆点移除颜色
					$(dot).addClass("dot-color"); //为当前圆点添加颜色样式
				}
			});
		</script>
	</head>

	<body>
		<div class="image-player">
		</div>
	</body>

</html>